<template>
  <div class="dimension-item">
    <a-row>
      <a-col :xs="16" :sm="16" :md="6" :lg="6" style="padding-right: 5px">
        <a-cascader
          :options="propertyData"
          v-model="dimensionVal"
          expand-trigger="hover"
          :show-search="{ propertyFilter }"
          @change="changeProperty"
          :allow-clear="true"
          placeholder="请选择维度"
        ></a-cascader>
      </a-col>
      <a-col :xs="8" :sm="8" :md="4" :lg="4" style="padding-right: 5px">
        <a-button icon="minus" v-on:click="removeItem"></a-button>
        <a-button icon="plus" style="margin-left: 5px;" v-if="isLast()" v-on:click="$parent.addItem"></a-button>
      </a-col>
    </a-row>
  </div>
</template>

<script>
export default {
  name: "Dimension",
  props: {
    properties: Array,
    index: Number,
    dimensions: Array,
    virtual: {
      type: Boolean,
      default: false
    }
  },
  data: function () {
    return {
      dimensionVal: [],
    }
  },
  watch: {
    dimensions() {
      this.onDimensionChanged()
    },
    properties(newVal) {
      if (typeof newVal === 'object' && newVal.length > 0){
        this.onDimensionChanged()
      }
    }
  },
  computed: {
    propertyData () {
      const data = []
      const ep = this.buildEventProperties()
      const up = this.buildUserProperties()
      const ug = this.buildUserGroupProperties()
      const ut = this.buildUserTagProperties()
      if (ep) {
        data.push(ep)
      }
      if (up) {
        data.push(up)
      }
      if (ug) {
        data.push(ug)
      }
      if (ut) {
        data.push(ut)
      }
      return data
    },
    eventProperties: function () {
      return this.properties.filter((item) => {
        return item.name.indexOf("events.") === 0 || (this.virtual && item.name.indexOf("virtual.events.") === 0)
      });
    },
    userProperties: function () {
      return this.properties.filter((item) => {
        return this.isUserProperty(item.name)
      });
    },
    userGroups: function () {
      return this.properties.filter((item) => {
        return item.name.indexOf("users.cg_") === 0
      });
    },
    userTags:function () {
      return this.properties.filter((item) => {
        return item.name.indexOf("users.ut_") === 0
      });
    },
  },
  methods: {
    isUserProperty(val){
      return (val.indexOf("users.") === 0 || (this.virtual && val.indexOf("virtual.users.") === 0))
      && val.indexOf("users.cg_") !== 0
      && val.indexOf("users.ut_") !== 0
    },
    propertyFilter(inputValue, path) {
      return path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
    },
    checkPropertyType (name){
      if (name.indexOf("events.") === 0 || (name.indexOf("virtual.events.") === 0)){
        return "event"
      }else if (this.isUserProperty(name)){
        return "user"
      }else if (name.indexOf("users.cg_") === 0){
        return "userGroup"
      }else if (name.indexOf("users.ut_") === 0){
        return "userTag"
      }else return null
    },
    changeProperty (value){
      if (!value || value.length === 0){
        this.dimensions[this.index] = null
      }else {
        this.dimensions[this.index] = value[value.length - 1]
      }
    },
    buildEventProperties () {
      const data = []
      let gd = {}
      for (let i in this.eventProperties) {
        if (typeof this.eventProperties[i].group === "string") {
          const group = this.eventProperties[i].group
          if (typeof gd[group] === "undefined") {
            gd[group] = []
          }
          gd[group].push(this.eventProperties[i])
        }
      }
      for (let i in gd) {
        const children = []
        for (let j in gd[i]){
          children.push({
            value: gd[i][j].name,
            label: gd[i][j].displayName
          })
        }
        data.push({
          value: i,
          label: i,
          children: children
        })
      }
      if (data.length > 0) {
        return {value: '事件属性', label: '事件属性', children: data}
      } else {
        return null
      }
    },
    buildUserProperties(){
      const userProperties = this.userProperties
      const children = []
      for (let i in userProperties){
        children.push({
          value: userProperties[i].name,
          label: userProperties[i].displayName
        })
      }
      return {value: '用户属性', label: '用户属性', children:children}
    },
    buildUserGroupProperties(){
      const properties = this.userGroups
      const children = []
      for (let i in properties){
        children.push({
          value: properties[i].name,
          label: properties[i].displayName
        })
      }
      return {value: '用户分群', label: '用户分群', children:children}
    },
    buildUserTagProperties(){
      const result = []
      let categories = {}
      const dataList = this.userTags
      dataList.map(item =>{
        const category = item.categoryName
        if (typeof category === 'string'){
          if (categories[category]){
            categories[category].children.push({
              value: item.name,
              label: item.displayName
            })
          }else {
            categories[category] = {
              value: category,
              label: category,
              children:[{value: item.name, label: item.displayName}]
            }
          }
        }
      })
      for (let i in categories){
        result.push(categories[i])
      }
      if (result.length>0){
        return {value: '用户标签', label: '用户标签', children:result}
      }else {
        return null
      }
    },
    onDimensionChanged(){
      if (typeof this.dimensions[this.index] !== "string"){
        return []
      }
      const name = this.dimensions[this.index]
      if (this.checkPropertyType(name) === 'event'){
        let group = ""
        for (let i in this.eventProperties){
          if (this.eventProperties[i].name === name){
            group = this.eventProperties[i].group
            break
          }
        }
        this.dimensionVal = ['事件属性', group, name]
      }else if (this.checkPropertyType(name) === 'user'){
        this.dimensionVal = ['用户属性', name]
      }else if (this.checkPropertyType(name) === 'userGroup'){
        this.dimensionVal = ['用户分群', name]
      }else if (this.checkPropertyType(name) === 'userTag'){
        let group = ""
        for (let i in this.userTags){
          if (this.userTags[i].name === name){
            group = this.userTags[i].categoryName
            break
          }
        }
        this.dimensionVal = ['用户标签', group, name]
      }
    },
    removeItem: function () {
      this.dimensions.splice(this.index, 1);
    },
    isLast: function () {
      return this.dimensions.length === (this.index + 1);
    },
    filterOption(input, option) {
      return (option.componentOptions.children[0].text && option.componentOptions.children[0].text.indexOf(input) > -1);
    },
  },
  mounted() { },
}
</script>

<style scoped>
.dimension-item {
  margin-bottom: 10px;
}
</style>
